<template>
  <div>
    <el-form style="float: left;margin-left: 100px" :inline="true"  class="demo-form-inline"  ref="CommentsFormFormRef" :model="CommentsForm">
      <el-form-item label="帖子标题" prop="post_title">
        <el-input style="width: 150px" v-model="CommentsForm.post_title"  placeholder="帖子标题"   clearable></el-input>
      </el-form-item>

      <el-form-item label="帖子作者" prop="post_author">
        <el-input style="width: 150px" v-model="CommentsForm.post_author"  placeholder="帖子作者"   clearable></el-input>
      </el-form-item>

      <el-form-item label="评论者" prop="comments_name" style="margin-left: 30px">
        <el-input style="width: 150px" v-model="CommentsForm.comments_name" placeholder="评论者"  clearable></el-input>
      </el-form-item>

      <el-form-item label="时间排序" prop="sort" style="margin-left: 30px">
        <el-select  v-model="CommentsForm.sort" placeholder="时间排序" style="width: 150px;">
          <el-option label="正序" value="正序"></el-option>
          <el-option label="倒序" value="倒序"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="margin-left: 50px" @click="select">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>


    <el-table
              :data="Comments.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        :index="Gindex"
        width="180">
      </el-table-column>
      <el-table-column
        prop="post_title"
        label="帖子标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username2"
        label="帖子作者"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username1"
        label="评论者"
        width="180">
      </el-table-column>
      <el-table-column
        prop="comments_content"
        label="评论内容"
        width="180">
        <template slot-scope="scope">
          <div v-html="scope.row.comments_content"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time1"
        label="评论时间"
        width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
          <el-button
            size="mini"
            type="danger"
            @click="deleteComments(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-pagination align='center'
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[1,5,10,20]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="Comments.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'SongList',
  data(){
    return{
      currentPage:1,
      totalCount:0,
      pageSize:10,
      selectComment:"",
      Comments:[],
      CommentsForm: {
        post_title: '',
        post_author:'',
        comments_name:'',
        sort:"倒序"
      },
      c_id:'',
    }
  },
  methods:{
    Gindex(index) {
      const page = this.currentPage // 当前页码
      const pagesize = this.pageSize // 每页条数
      return index  +1+ (page - 1) * pagesize
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    resetForm() {
      this.$refs.CommentsFormFormRef.resetFields()
      this.findAllComments();
    },
    selectCommentsbypostid(){
      if (!isNaN(this.CommentsForm.post_id)) {
          this.$http.post('http://localhost:8888/Comments/findCommentsByPostIDL',
            {"post_id": this.CommentsForm.post_id},
            {emulateJSON: true}
          ).then(function (res) {
              if (res.data.code == 200) {
                alert(res.data.msg);
                this.Comments = res.data.data;
              } else {
                alert(res.data.msg);
              }
            }
          )
      }
      else
        this.$message('请输入数字');
     },
        selectCommentsbyuserid(){
          if (!isNaN(this.CommentsForm.user_id)) {
          this.$http.post('http://localhost:8888/Comments/findCommentsByUserIDL',
            {"user_id": this.CommentsForm.user_id},
            {emulateJSON: true}
          ).then(function (res) {
              if (res.data.code == 200) {
                alert(res.data.msg);
                this.Comments = res.data.data;
              } else {
                alert(res.data.msg);
              }
            }
          )}
          else
            this.$message('请输入数字');
        },
    deleteComments(iid){
      this.$confirm('是否确认删除该评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.c_id = iid;
        this.$http.post('http://localhost:8888/Comments/deleteComments',
          {"id": this.c_id},
          {emulateJSON: true}
        ).then(function (res) {
          if (res.data.code == 200) {
            alert(res.data.msg);
            this.$router.go(0);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    select() {
      this.$http.post('http://localhost:8888/Comments/select',
        {
          "post_title": this.CommentsForm.post_title,
          "post_author": this.CommentsForm.post_author,
          "comments_name": this.CommentsForm.comments_name,
          "sort": this.CommentsForm.sort
        },
        {emulateJSON: true}
      ).then(function (res) {
        if (res.data.code == 200) {
          alert(res.data.msg);
          this.Comments = res.data.data;
        } else {
          alert(res.data.msg);
        }
      })

    },

    findAllComments() {
      this.$http.post('http://localhost:8888/Comments/findAllComments2',
      ).then(function (res) {
        this.Comments = res.data.data;
      })
    },
  },
  created() {
    this.findAllComments();
  }
}

</script>

<style scoped>

</style>
